<template>
    <section id="hardware" class="section section-bg-white">
        <div class="container hardware-content">
            <div class="hardware-image-wrapper">
                <img src="/src/assets/hardware.png" alt="硬件架构图" class="hardware-image">
            </div>
            <div class="hardware-details">
                <h2 class="section-title-sub">硬件构成</h2>
                <p class="description">我们选用了稳定且易于开发的组件，确保项目可靠性与 DIY 的乐趣。</p>
                <ul class="hardware-list">
                    <li class="hardware-list-item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h10v10"/><path d="M17 7v10"/></svg>
                        <div>
                            <h4 class="list-item-title">主控芯片：ESP32-S2</h4>
                            <p class="list-item-description">强大的处理能力，内置 Wi-Fi，是本项目完美的核心。</p>
                        </div>
                    </li>
                    <li class="hardware-list-item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                        <div>
                            <h4 class="list-item-title">音频输入：I2S 麦克风</h4>
                            <p class="list-item-description">如 INMP441，数字接口，信噪比高，拾音效果清晰。</p>
                        </div>
                    </li>
                    <li class="hardware-list-item">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M12 16h.01"/><path d="M12 8h.01"/><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
                        <div>
                            <h4 class="list-item-title">音频输出：I2S 功放与扬声器</h4>
                            <p class="list-item-description">如 MAX98357，将数字音频信号转换为声音播放出来。</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
  </template>
  